<template>
  <div class="container">
    <!-- 其他内容保持不变 -->

    <!-- 类别列表展示 -->
    <a-card class="general-card" :title="$t('Category List')">
      <a-list>
        <a-list-item v-for="category in categorys" :key="category.id">
          <a-list-item-meta
            :title="`Name: ${category.name}`"
          />
          <template #actions>
            <a-button @click="editCategory(category)">Edit</a-button>
          </template>
        </a-list-item>
      </a-list>
    </a-card>

    <!-- Create/Edit Category Modal -->
    <a-modal
      v-model:visible="categoryModalVisible"
      title="Category Details"
      @ok="saveCategory"
      @cancel="categoryModalVisible = false"
    >
      <a-form :model="currentCategory">
        <a-form-item label="Category Name">
          <a-input v-model="currentCategory.name" />
        </a-form-item>
        <!-- 法规 -->
        <div><strong>Regulation Content:</strong></div>
        <a-select
          v-model="currentCategory.regulation_content"
          placeholder="Select Regulation"
          style="width: 100%; margin-bottom: 16px"
        >
          <a-option
            v-for="regulation in regulations"
            :key="regulation.id"
            :value="regulation.content"
          >
            {{ regulation.content }}
          </a-option>
        </a-select>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import axios from 'axios';
  import baseUrl from '../../../config';

  const categorys = ref([]); //

    // 存储法规列表
    const regulations = ref<any[]>([]);

  // 存储选择的法规ID
  const selectedRegulationId = ref<number | string>('');
  // 获取法规列表
  async function fetchRegulations() {
    try {
      const response = await axios.get(`${baseUrl}/api/regulations/`);
      if (response.status === 200) {
        console.log('Regulations data:', response.data);  // 添加这个 log
        regulations.value = response.data;
      } else {
        console.error('Failed to fetch regulations');
      }
    } catch (error) {
      console.error('Error fetching regulations:', error);
    }
  }

  // 当前编辑的类别
  const currentCategory = ref({
    id: '',
    name: '',
    regulation_content: '',
  });

  // 控制类别弹窗是否可见
  const categoryModalVisible = ref(false);

  // 获取类别列表
  const fetchCategorys = async () => {
    try {
      const response = await axios.get(`${baseUrl}/api/categorys/`);
      categorys.value = response.data;
    } catch (error) {
      console.error('Error fetching categorys:', error);
    }
  };
  // 编辑类别
  const editCategory = (category) => {
    currentCategory.value = { ...category };
    categoryModalVisible.value = true;
  };

  // 保存类别（新建或编辑）
  const saveCategory = async () => {
    const method = currentCategory.value.id ? 'PUT' : 'POST';
    const url = currentCategory.value.id
      ? `${baseUrl}/api/categorys/${currentCategory.value.id}/`
      : `${baseUrl}/api/categorys/`;

    try {
      await axios({
        method,
        url,
        data: currentCategory.value,
      });
      fetchCategorys();
      categoryModalVisible.value = false;
    } catch (error) {
      console.error('Error saving category:', error);
    }
  };
  onMounted(async () => {
    await fetchCategorys();
    await fetchRegulations();
  });
</script>

<style scoped>
  .container {
    padding: 0 20px 40px 20px;
    overflow: hidden;
  }
</style>
